import { Button, Flex, Form, Input, Pagination, Select , DatePicker, Modal, Radio, RadioChangeEvent, TableProps, Table, Checkbox, CheckboxChangeEvent, Space, PaginationProps, Empty, message, } from 'antd';
import style from '../css/Doctorscheduling.module.scss'
import { PlusOutlined, SearchOutlined, UploadOutlined } from '@ant-design/icons';
import { ChangeEvent, useEffect, useState } from 'react';
import dayjs from 'dayjs';
import { DatePickerProps } from 'antd/lib';
import { departlists, doctorschedut, insetsechedus } from '../utils/request';
function Doctorscheduling() {
    const [form] = Form.useForm();
    const [formOne] = Form.useForm();
    const { RangePicker } = DatePicker;
    const [departlist,setDepartlist] = useState([
        {
            depart:'',
            depart_id:1
        }
    ])
    // 获取今日日期和7天的日期数组
    // 定义日期和星期的类型
    interface DayInfo {
        date: string;
        weekDay: string;
        isToday: boolean;
    }
    // 手动映射星期数字到中文大写
    const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    const getNext7Days = (): DayInfo[] => {
        const today = dayjs();
        const daysArray: DayInfo[] = [];

        for (let i = 0; i < 7; i++) {
            const currentDate = today.add(i, 'day');
            const formattedDate = currentDate.format('YYYY-MM-DD');
            const weekDay = weekDays[currentDate.day()];
            const isToday = i === 0;
            daysArray.push({ date: formattedDate, weekDay, isToday });
        }

        return daysArray;
    };
    const [days, setDays] = useState<DayInfo[]>([]);
    // 医生排班情况
    const [codesoure,setCodesoure] = useState<any>([
    ])
    useEffect(()=>{
        data.splice(0)
        codesoure.forEach((item:any,index:number) => {
            data.push(...[
                {
                    key: 2*index+1+'',
                    name: item.name,
                    doctor_id:item.doctor_id,
                    time: '上午(08:00-12:00)',
                    depart:'请选择诊室',
                    type: '请选择挂号种类',
                    bol: false,
                    amount:0
                },
                {
                    key: 2*index+2+'',
                    name: item.name,
                    doctor_id:item.doctor_id,
                    time: '下午(14:00-18:00)',
                    depart:'请选择诊室',
                    type: '请选择挂号种类',
                    bol: false,
                    amount:0
                }
            ])
        });
    },[codesoure])
    useEffect(()=>{
        departlists().then(res=>{
            setDepartlist(res.data.slice(0,10))
        }).catch(err=>{
            console.log(err)
        })
        //查询医生排班情况
        doctorschedut({
            id:1
        }).then(res=>{
            setCodesoure(res.data)
        }).catch(err=>{
            console.log(err)
        })
        setDays(getNext7Days())
    },[])
    // 科室列表分页
    const onChange: PaginationProps['onChange'] = (pageNumber) => {
        console.log('Page: ', pageNumber);
        departlists().then(res=>{
            setDepartlist(res.data.slice((pageNumber-1)*10,pageNumber*10))
        }).catch(err=>{
            console.log(err)
        })
    };
    // 排班医生数据
    const [people]=useState([
        {
            depart:'门诊外科',
            doctor:[
                { value: '全部', label: '全部' },
                { value: '李医生1', label: '李医生1' },
                { value: '李医生', label: '李医生' },
                { value: '黄医生', label: '黄医生' },
                { value: '欧阳医生', label: '欧阳医生' },
                { value: '王医生', label: '王医生' },
                { value: '刘医生', label: '刘医生' },
            ]
        },
        {
            depart:'门诊内科',
            doctor:[
                { value: '全部', label: '全部' },
                { value: '李医生2', label: '李医生2' },
                { value: '李医生', label: '李医生' },
                { value: '黄医生', label: '黄医生' },
                { value: '欧阳医生', label: '欧阳医生' },
                { value: '王医生', label: '王医生' },
                { value: '刘医生', label: '刘医生' },
            ]
        },
        {
            depart:'骨科',
            doctor:[
                { value: '全部', label: '全部' },
                { value: '李医生20', label: '李医生20' },
                { value: '李医生', label: '李医生' },
                { value: '黄医生', label: '黄医生' },
                { value: '欧阳医生', label: '欧阳医生' },
                { value: '王医生', label: '王医生' },
                { value: '刘医生', label: '刘医生' },
            ]
        },
        {
            depart:'耳鼻喉科',
            doctor:[
                { value: '全部', label: '全部' },
                { value: '李医生4', label: '李医生4' },
                { value: '李医生', label: '李医生' },
                { value: '黄医生', label: '黄医生' },
                { value: '欧阳医生', label: '欧阳医生' },
                { value: '王医生', label: '王医生' },
                { value: '刘医生', label: '刘医生' },
            ]
        },
        {
            depart:'心内科',
            doctor:[
                { value: '全部', label: '全部' },
                { value: '李医生5', label: '李医生5' },
                { value: '李医生', label: '李医生' },
                { value: '黄医生', label: '黄医生' },
                { value: '欧阳医生', label: '欧阳医生' },
                { value: '王医生', label: '王医生' },
                { value: '刘医生', label: '刘医生' },
            ]
        },
        {
            depart:'皮肤科',
            doctor:[
                { value: '全部', label: '全部' },
                { value: '李医生6', label: '李医生6' },
                { value: '李医生', label: '李医生' },
                { value: '黄医生', label: '黄医生' },
                { value: '欧阳医生', label: '欧阳医生' },
                { value: '王医生', label: '王医生' },
                { value: '刘医生', label: '刘医生' },
            ]
        },
        {
            depart:'中医科1',
            doctor:[
                { value: '全部', label: '全部' },
                { value: '李医生7', label: '李医生7' },
                { value: '李医生', label: '李医生' },
                { value: '黄医生', label: '黄医生' },
                { value: '欧阳医生', label: '欧阳医生' },
                { value: '王医生', label: '王医生' },
                { value: '刘医生', label: '刘医生' },
            ]
        },
        {
            depart:'中医科2',
            doctor:[
                { value: '全部', label: '全部' },
                { value: '李医生8', label: '李医生8' },
                { value: '李医生', label: '李医生' },
                { value: '黄医生', label: '黄医生' },
                { value: '欧阳医生', label: '欧阳医生' },
                { value: '王医生', label: '王医生' },
                { value: '刘医生', label: '刘医生' },
            ]
        },
        {
            depart:'中医科3',
            doctor:[
                { value: '全部', label: '全部' },
                { value: '李医生9', label: '李医生9' },
                { value: '李医生', label: '李医生' },
                { value: '黄医生', label: '黄医生' },
                { value: '欧阳医生', label: '欧阳医生' },
                { value: '王医生', label: '王医生' },
                { value: '刘医生', label: '刘医生' },
            ]
        },
        {
            depart:'中医科4',
            doctor:[
                { value: '全部', label: '全部' },
                { value: '李医生10', label: '李医生10' },
                { value: '李医生', label: '李医生' },
                { value: '黄医生', label: '黄医生' },
                { value: '欧阳医生', label: '欧阳医生' },
                { value: '王医生', label: '王医生' },
                { value: '刘医生', label: '刘医生' },
            ]
        },
    ])
    const [option,setOption] = useState(1) 
    const setoption=(i: number)=>{
        setOption(i)
        doctorschedut({
            id:i
        }).then(res=>{
            setCodesoure(res.data)
        }).catch(err=>{
            console.log(err)
        })
    }
    // 重置
    const reset=()=>{
        console.log('重置')
        form.resetFields()
    }
    // 搜索
    const serch=()=>{
        console.log('搜索')
        form.validateFields().then(values => {
            console.log('Validated values: ', values);
        }).catch(info => {
            console.log('Validate Failed:', info);
        });
    }
    // 新增排班
    const insert=()=>{
        data.splice(0)
        codesoure.forEach((item:any,index:number) => {
            data.push(...[
                {
                    key: 2*index+1+'',
                    name: item.name,
                    doctor_id:item.doctor_id,
                    time: '上午(08:00-12:00)',
                    depart:'门诊一诊室',
                    type: item.call+'号',
                    bol: false,
                    amount:0
                },
                {
                    key: 2*index+2+'',
                    name: item.name,
                    doctor_id:item.doctor_id,
                    time: '下午(14:00-18:00)',
                    depart:'门诊一诊室',
                    type: item.call+'号',
                    bol: false,
                    amount:0
                }
            ])
        });
        setConfigamshow(true)
    }
    // 排班方式选择
    const [value, setValue] = useState(1);
    const setvalue = (e: RadioChangeEvent) => {
        setValue(e.target.value);
    };
    // 对话框日期选择
    const customWeekStartEndFormat: DatePickerProps['format'] = (value) =>
        `${dayjs(value).startOf('week').format('YYYY/MM/DD')} 至 ${dayjs(value).endOf('week').format('YYYY/MM/DD')}`;
    // 新增排班对话框表格数据
    interface DataType {
        key: string;
        name?: string;
        time: string;
        depart: string;
        type: string;
        bol?: boolean;
        amount:Number;
        doctor_id?:number
    }
    const columns:TableProps<DataType>['columns'] = [
        {
            title: '医生',
            dataIndex: 'name',
            key: 'name',
            width: 105,
            onCell: (_, index) => {
                if (Number(index) % 2 == 0) {
                    return { rowSpan: 2 }
                } else {
                    return { rowSpan: 0 }
                }

            }
        },
        {
            title: '排班时段',
            dataIndex: 'time',
            key: 'time',
            width: 174,
            render: (_, record) => (
                <Checkbox onChange={(e)=>checkboxchange(e,record.key)} checked={record.bol}>{record.time}</Checkbox>
            )
        },
        {
            title: '排班诊室',
            dataIndex: 'depart',
            key: 'depart',
            width: 163,
            render: (_,record) => (
                <Select
                    placeholder='请输入诊室'
                    value={record.depart}
                    onChange={(e)=>selectchange(record.key, e)}
                    style={{ width: 150, border: 'none', height: 37, fontSize: 13 }}
                    options={[
                        { value: '门诊外一诊室', label: '门诊外一诊室' },
                        { value: '门诊外二诊室', label: '门诊外二诊室' },
                        { value: '门诊外三诊室', label: '门诊外三诊室' },
                    ]}
                />
            )
        },
        {
            title: '挂号种类',
            key: 'type',
            dataIndex: 'type',
            width: 152,
            render: (_,record) => (
                <Select
                    placeholder='请选择挂号种类'
                    onChange={(e)=>selecttype(e,record.key)}
                    value={record.type}
                    style={{ width: 144, border: 'none', height: 37, fontSize: 13 }}
                    options={[
                        { value: '主任医师号', label: '主任医师号' },
                        { value: '副主任医师号', label: '副主任医师号' },
                        { value: '普通医师号', label: '普通医师号' },
                        { value: '便民免费号', label: '便民免费号' },
                    ]}
                />
            )
        },
        {
            title: '号源数量',
            key: 'action',
            width: 91,
            render: (_,record) => (
                <Input placeholder="请输入" value={record.amount+''} maxLength={2} onChange={(e)=>getInput(e,record.key)} style={{ width: 81, height: 37, border: 'none', fontSize: 13 }} />
            ),
        },
    ];
    const [data, setData] = useState<ScheduleItem[]>(
        [
        ]
    )
    //   对话框复选框函数
    const checkboxchange=(event: CheckboxChangeEvent,key: string)=>{
        // console.log(event.target.checked)
        const newDate= [...data]
        newDate[newDate.findIndex(item => item.key === key)].bol=event.target.checked
        setData(newDate)
    }
    //  对话框选择器函数
    // 选择诊室
    const selectchange=(key: string,event: string)=>{
        const newDate= [...data]
        console.log(event)
        newDate[newDate.findIndex(item => item.key === key)].depart=event
        setData(newDate)
    }
    // 选择挂号种类
    const selecttype=(event: string,key: string)=>{
        const newDate= [...data]
        console.log(event)
        newDate[newDate.findIndex(item => item.key === key)].type=event
        setData(newDate)
    }
    // 号源数量函数
    const getInput=(event: any,key: string)=>{
        console.log(Number(event.target.value))
        const newDate= [...data]
        newDate[newDate.findIndex(item => item.key === key)].amount=Number(event.target.value)
        setData(newDate)
    }
    // 新增排班对话框确认取消
    const [configamshow,setConfigamshow] = useState(false)
    const [saveloading,setSaveloading] = useState(false)
    interface ScheduleItem {
        key: string;
        name: string;
        time: string;
        depart: string;
        type: string;
        bol: boolean;
        amount:Number;
        doctor_id:number
    }

    interface CombinedItem {
        id: number;
        morningShift: Number;
        afternoonShift: Number;
        name: string,
        morningBol: boolean,
        afternoonBol: boolean
    }

    function combineData(data: ScheduleItem[]): CombinedItem[] {
        const combinedData: CombinedItem[] = [];
        const dataMap: { [key: number]: ScheduleItem[] } = {};

        // 遍历数据，将相同 ID 的数据分组
        data.forEach((item) => {
            const { doctor_id, name } = item;

            // 如果该 ID 还没有在 dataMap 中初始化，则初始化一个空数组
            if (!dataMap[doctor_id]) {
                dataMap[doctor_id] = [];
            }

            // 将当前项添加到对应 ID 的数组中
            dataMap[doctor_id].push(item);

            // 如果该 ID 的数组已经有了两条数据，则将其合并并添加到 combinedData 中
            if (dataMap[doctor_id].length === 2) {
                const combinedItem: CombinedItem = {
                    id: doctor_id,
                    name: name,
                    // 根据你的需求合并数据，这里假设简单合并两个时间段
                    morningShift: dataMap[doctor_id][0].time === '上午(08:00-12:00)' ? dataMap[doctor_id][0].amount : dataMap[doctor_id][1].amount,
                    afternoonShift: dataMap[doctor_id][0].time === '下午(14:00-18:00)' ? dataMap[doctor_id][0].amount : dataMap[doctor_id][1].amount,
                    morningBol: dataMap[doctor_id][0].time === '上午(08:00-12:00)' ? dataMap[doctor_id][0].bol : dataMap[doctor_id][1].bol,
                    afternoonBol: dataMap[doctor_id][0].time === '下午(14:00-18:00)' ? dataMap[doctor_id][0].bol : dataMap[doctor_id][1].bol,
                };

                combinedData.push(combinedItem);

                // 清空该 ID 的数组，准备处理下一个两条数据
                dataMap[doctor_id] = [];
            }
        });

        return combinedData;
    }
    const saveOK=()=>{
        setSaveloading(true)
        setTimeout(() => {
            setSaveloading(false)
            formOne.validateFields().then(values => {
                // console.log('Validated values: ', dayjs(values.date).format('YYYY-MM-DD'),option);
                insetsechedus({
                    data:combineData(data),
                    date:dayjs(values.date).format('YYYY-MM-DD')
                }).then(res=>{
                    if(res.data.state==200){
                        doctorschedut({
                            id:option
                        }).then(res=>{
                            setCodesoure(res.data)
                        }).catch(err=>{
                            console.log(err)
                        })
                    }else if(res.data.message){
                        message.warning(res.data.message)
                    }
                }).catch(err=>{
                    console.log(err)
                })
            }).catch(info => {
                console.log('Validate Failed:', info);
            });
            
            setConfigamshow(false)
        }, 2000);
    }
    const saveCancel=()=>{
        setConfigamshow(false)
    }
    // 排班详情对话框表格数据
    const [detailshow,setDetailshow] = useState(false)
    const [detailloading,setDetailloading] = useState(false)
    const datailsColumns:TableProps<DataType>['columns'] =[
        {
            title:'排班时段',
            dataIndex: 'time',
            key: 'time',
            width:174,
        },
        {
            title:'排班诊室',
            dataIndex: 'depart',
            key: 'depart',
            width:128,
        },
        {
            title:'挂号种类',
            dataIndex: 'type',
            key: 'type',
            width:112,
        },
        {
            title:'号源数量',
            dataIndex: 'amount',
            key: 'amount',
            width:90,
        },
        {
            title:'加号',
            dataIndex: 'plus',
            key: 'plus',
            width:90,
            render:(_,record)=>(
                <Input placeholder="请输入" onChange={(e)=>getPlus(e,record.key)} style={{ width: 81, height: 37, border: 'none', fontSize: 13 }}  maxLength={2}/>
            )
        },
        {
            title: '操作',
            key: 'action',
            width:90,
            render: () => (
              <Space size="small">
                <a onClick={()=>cloase()}>停诊</a>
                <a onClick={()=>del()}>删除</a>
              </Space>
            ),
          },
    ]
    const [detailData,setDetailsData] = useState<DataType[]>([
        {
            key:'1',
            time:'上午(08:00-12:00)',
            depart:'门诊外一诊室',
            type:'主任医师号',
            amount:0
        }
    ])
    // 排班详情对话框加号
    const getPlus=(event: ChangeEvent<HTMLInputElement>,key: string)=>{
        const newDate= [...detailData]
        newDate[newDate.findIndex(item => item.key === key)].amount=Number(event.target.value)
        const newArr= [...numsource]
        // newArr[stop.index][stop.num-1].count=Number(event.target.value)
        setDetailsData(newDate)
        setNumsource(newArr)
    }
    // 停诊
    const cloase=()=>{
        console.log('停诊')
        const newArr= [...numsource]
        // newArr[stop.index][stop.num-1].status=true
        setNumsource(newArr)
    }
    // 删除
    const del=()=>{
        console.log('删除')
    }
    // 排班详情取消
    const saveDetailCancel=()=>{
        console.log('取消')
        setDetailshow(false)
    }
    // 排班详情确认
    const saveDetailOK=()=>{
        console.log('确认')
        setDetailloading(true)
        setTimeout(() => {
            setDetailloading(false)
            setDetailshow(false)
        }, 2000);
    }
    // 排班详情
    // const [stop,setStop] = useState({
    //     index:0,
    //     num:0
    // })
    // const detail=(index: number,num: number)=>{
    //     console.log(index,num)
    //     setStop({
    //         index,
    //         num
    //     })
    //     setDetailshow(true)
    // }
    // 号源
    const [numsource,setNumsource] = useState([
        [
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:true,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            }
        ],
        [
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:true,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            }
        ],
        [
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:true,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            }
        ],
        [
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:true,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            }
        ],
        [
            {
                status:true,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            },
            {
                status:false,
                count:20,
            }
        ]
    ])
    return ( 
        <>
            {/* 新增排班对话框 */}
            <Modal
                title='新增排班'
                open={configamshow}
                width={725}
                onCancel={saveCancel}
                footer={[
                    <Flex key='flex' align='center' justify='space-between'>
                        <p style={{color:'#333'}}>挂号科室:<span style={{marginLeft:5}}>门诊外科</span></p>
                        <Flex key='flex' justify='flex-end'>
                            <Button key="back" onClick={()=>saveCancel()} style={{ height: 32, marginRight: 10 }}>
                                取消
                            </Button>,
                            <Button key="submit" type="primary" loading={saveloading} onClick={()=>saveOK()} style={{ height: 32 }}>
                                保存
                            </Button>,
                        </Flex>
                    </Flex>
                ]}
            >
                <Form
                    form={formOne}
                    initialValues={{methods:value,week:dayjs(),date:dayjs(),month:dayjs()}}
                style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>
                    <Form.Item label='排班日期' name='week' style={{marginBottom:0,display:'none'}} className={value==2?style.show:''} >
                        <DatePicker style={{width:230,height:32,borderRadius:0,}}  format={customWeekStartEndFormat} picker="week" />
                    </Form.Item>
                    <Form.Item label='排班日期' name='date' style={{marginBottom:0,display:'none'}} className={value==1?style.show:''}>
                        <DatePicker className={value==1?style.show:''} style={{width:200,height:32,borderRadius:0,}} />
                    </Form.Item>
                    <Form.Item label='排班日期' name='month' style={{marginBottom:0,display:'none'}} className={value==3?style.show:''}>
                        <DatePicker className={value==3?style.show:''} style={{width:200,height:32,borderRadius:0,}} picker="month" />
                    </Form.Item>
                    <Form.Item label='排班方式' name='methods' style={{marginBottom:0}}>
                        <Radio.Group onChange={setvalue}>
                            <Radio value={1}>按天</Radio>
                            <Radio value={2}>按周</Radio>
                            <Radio value={3}>按月</Radio>
                        </Radio.Group>
                    </Form.Item>
                </Form>
                <Table<DataType>  className={style.modaltable} columns={columns} dataSource={data} pagination={false} />
            </Modal>
            {/* 排班详情对话框 */}
            <Modal
                title='排班详情'
                open={detailshow}
                onCancel={saveDetailCancel}
                width={725}
                footer={[
                    <Flex key='flex' justify='flex-end'>
                        <Button key="back" onClick={() => saveDetailCancel()} style={{ height: 32, marginRight: 10 }}>
                            取消
                        </Button>,
                        <Button key="submit" type="primary" loading={detailloading} onClick={() => saveDetailOK()} style={{ height: 32 }}>
                            保存
                        </Button>,
                    </Flex>
                ]}
            >
                <Flex style={{width:684,height:53,background:'#f2f2f2' ,margin:'auto',padding:'0 15px' ,boxSizing:'border-box'}} align='center'  className={style.detailstitle}>
                    <p>排班科室:<span>门诊外科</span></p>
                    <p>排班医生:<span>李医生</span></p>
                    <p>排班日期:<span>2024-07-09</span></p>
                </Flex>
                <Table<DataType> className={style.modaldetails} columns={datailsColumns} dataSource={detailData} pagination={false} bordered />
            </Modal>
            <Flex style={{width:'100%',height:700}} justify='space-between'>
                <div className={style.selectbox}>
                    <div className={style.title}>门诊科室</div>
                    <div className={style.depart}>
                        <div className={style.input}>
                            <Input prefix={<img src='https://cdn7.axureshop.com/demo2024/2321849/images/%E9%97%A8%E8%AF%8A%E6%8C%82%E5%8F%B7/u3637.svg'/>} placeholder='科室名称检索'></Input>
                        </div>
                        {/* 排班科室 */}
                        <ul className={style.departlists}>
                            {
                                departlist.map((item,index)=>(
                                    <li key={index} className={option==item.depart_id?style.active:''} onClick={()=>setoption(item.depart_id)}>{item.depart}</li>
                                ))
                            }
                        </ul>
                        <Pagination style={{width:'100%',justifyContent:'center',marginTop:20}} defaultCurrent={1} total={22} onChange={onChange} pageSize={11} />
                    </div>
                </div>
                <div className={style.Scheduling}>
                    <div className={style.headerbox}>
                        <Form
                            form={form}
                            initialValues={{ doctor: '全部' }}
                            style={{height:'100%',width:'100%',display:'flex',justifyContent:'space-between',alignItems:'center'}}
                        >
                            <Flex style={{height:'100%'}} align='center'>
                                {/* 排班医生 */}
                                <Form.Item name='doctor' label='排班医生' className={style.itemstyle}>
                                    <Select
                                        style={{ width: 200 , height: 32}}
                                        options={people[0].doctor}
                                    />
                                </Form.Item>
                                <Form.Item name='time' label='排班时段' className={style.itemstyle}>
                                    <Select
                                        style={{ width: 200 , height: 32}}
                                        options={[
                                            {value:'全部',label:'全部'},
                                            {value:'上午',label:'上午'},
                                            {value:'下午',label:'下午'},
                                            {value:'晚上',label:'晚上'},
                                        ]}
                                    />
                                </Form.Item>
                            </Flex>
                            <Flex>
                                <Button style={{
                                    width:61,
                                    height:32,
                                    marginRight:10
                                }} onClick={()=>reset()}>重置</Button>
                                <Button style={{
                                    width:75,
                                    height:32
                                }} type="primary" icon={<SearchOutlined />} onClick={()=>serch()}>
                                    搜索
                                </Button>
                            </Flex>
                        </Form>
                    </div>
                    <div className={style.buttonbox}>
                        <Button style={{
                            width:103,
                            height:32,
                            borderRadius:0
                        }} type="primary" onClick={()=>insert()} icon={<PlusOutlined />}>
                            新增排班
                        </Button>
                        <Flex>
                            <Button style={{width:61,height:32,marginRight:10}}>上周</Button>
                            <RangePicker />
                            <Button style={{width:61,height:32,marginLeft:10}}>下周</Button>
                            <Button style={{width:89,height:32,marginLeft:20}}>返回本周</Button>
                        </Flex>
                        <Button style={{
                            color:'#0460ff',
                            borderColor:'#0460ff',
                            width:75,
                            height:32
                        }} icon={<UploadOutlined />}>导出</Button>
                    </div>
                    <div className={style.calender}>
                        <ul className={style.headertitle}>
                            <li>
                                <p>医生</p>
                            </li>
                            {
                                days.map((item,index)=>
                                    <li key={index}>
                                        <p className={style.week}>{item.weekDay}</p>
                                        <p>{item.date}</p>
                                    </li>
                                )
                            }
                        </ul>
                        {
                            codesoure.map((item:any,index:number)=>(
                                <div className={style.doctornumber} key={index}>
                                    <p className={style.doctorname}>{item.name}</p>
                                    <ul className={style.datalists}>
                                        {
                                            item.schedus.length==0?<li style={{width:'100%',height:90,textAlign:'center',borderBottom:'1px solid rgb(242, 242, 242)'}}><Empty description={false} style={{width:'100%',height:70,margin:0,border:'none'}} imageStyle={{height:40,border:'none'}}/>
                                            <p style={{color:'rgba(0, 0, 0,0.5)',fontSize:12,marginBottom:5}}>暂无数据</p></li>
                                            :
                                            item.schedus.map((code:any,i:number)=>
                                                <li key={i}>
                                                    <div className={code.timeOne+code.timeTwo+code.timeThree+code.timeFour==0?style.stop:''}>
                                                        <p>上午  {code.timeOne+code.timeTwo+code.timeThree+code.timeFour}个</p>
                                                        <p className={code.timeOne+code.timeTwo+code.timeThree+code.timeFour==0? style.show : style.hid}>（已停诊）</p>
                                                    </div>
                                                        <div className={code.timeFive+code.timeSix+code.timeSeven+code.timeEight==0?style.stop:''}>
                                                        <p>下午  {code.timeFive+code.timeSix+code.timeSeven+code.timeEight}个</p>
                                                        <p className={code.timeFive+code.timeSix+code.timeSeven+code.timeEight==0? style.show : style.hid}>（已停诊）</p>
                                                    </div>
                                                </li>
                                            )
                                        }
                                        {/* <li onClick={()=>detail(index,1)} className={numsource[index][0].status?style.stop:''}>
                                            <p>上午  {numsource[index][0].count}个</p>
                                            <p className={numsource[index][0].status?style.show:style.hid}>（已停诊）</p>
                                        </li>
                                        <li onClick={()=>detail(index,2)} className={numsource[index][1].status?style.stop:''}>
                                            <p>上午  {numsource[index][1].count}个</p>
                                            <p className={numsource[index][1].status?style.show:style.hid}>（已停诊）</p>
                                        </li>
                                        <li onClick={()=>detail(index,3)} className={numsource[index][2].status?style.stop:''}>
                                            <p>上午  {numsource[index][2].count}个</p>
                                            <p className={numsource[index][2].status?style.show:style.hid}>（已停诊）</p>
                                        </li>
                                        <li onClick={()=>detail(index,4)} className={numsource[index][3].status?style.stop:''}>
                                            <p>上午  {numsource[index][3].count}个</p>
                                            <p className={numsource[index][3].status?style.show:style.hid}>（已停诊）</p>
                                        </li>
                                        <li onClick={()=>detail(index,5)} className={numsource[index][4].status?style.stop:''}>
                                            <p>上午  {numsource[index][4].count}个</p>
                                            <p className={numsource[index][4].status?style.show:style.hid}>（已停诊）</p>
                                        </li>
                                        <li onClick={()=>detail(index,6)} className={numsource[index][5].status?style.stop:''}>
                                            <p>上午  {numsource[index][5].count}个</p>
                                            <p className={numsource[index][5].status?style.show:style.hid}>（已停诊）</p>
                                        </li>
                                        <li onClick={()=>detail(index,7)} className={numsource[index][6].status?style.stop:''}>
                                            <p>上午  {numsource[index][6].count}个</p>
                                            <p className={numsource[index][6].status?style.show:style.hid}>（已停诊）</p>
                                        </li>
                                        <li className={numsource[index][7].status?style.stop:''} onClick={()=>detail(index,8)}>
                                            <p>下午  {numsource[index][7].count}个</p>
                                            <p className={numsource[index][7].status?style.show:style.hid}>（已停诊）</p>
                                        </li >
                                        <li onClick={()=>detail(index,9)} className={numsource[index][8].status?style.stop:''}>
                                            <p>下午  {numsource[index][8].count}个</p>
                                            <p className={numsource[index][8].status?style.show:style.hid}>（已停诊）</p>
                                        </li>
                                        <li onClick={()=>detail(index,10)} className={numsource[index][9].status?style.stop:''}>
                                            <p>下午  {numsource[index][9].count}个</p>
                                            <p className={numsource[index][9].status?style.show:style.hid}>（已停诊）</p>
                                        </li>
                                        <li onClick={()=>detail(index,11)} className={numsource[index][10].status?style.stop:''}>
                                            <p>下午  {numsource[index][10].count}个</p>
                                            <p className={numsource[index][10].status?style.show:style.hid}>（已停诊）</p>
                                        </li>
                                        <li onClick={()=>detail(index,12)} className={numsource[index][11].status?style.stop:''}>
                                            <p>下午  {numsource[index][11].count}个</p>
                                            <p className={numsource[index][11].status?style.show:style.hid}>（已停诊）</p>
                                        </li>
                                        <li onClick={()=>detail(index,13)} className={numsource[index][12].status?style.stop:''}>
                                            <p>下午  {numsource[index][12].count}个</p>
                                            <p className={numsource[index][12].status?style.show:style.hid}>（已停诊）</p>
                                        </li>
                                        <li onClick={()=>detail(index,14)} className={numsource[index][13].status?style.stop:''}>
                                            <p>下午  {numsource[index][13].count}个</p>
                                            <p className={numsource[index][13].status?style.show:style.hid}>（已停诊）</p>
                                        </li>    */}
                                    </ul>
                                </div>
                            ))
                        }
                        {/* <div className={style.doctornumber}>
                            <p className={style.doctorname}>李医生</p>
                            <ul className={style.datalists} onClick={()=>detail()}>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li className={style.stop}>
                                    <p>上午  20个</p>
                                    <p>（已停诊）</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>   
                            </ul>
                        </div>
                        <div className={style.doctornumber}>
                            <p className={style.doctorname}>李医生</p>
                            <ul className={style.datalists}>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li className={style.stop}>
                                    <p>上午  20个</p>
                                    <p>（已停诊）</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>   
                            </ul>
                        </div>
                        <div className={style.doctornumber}>
                            <p className={style.doctorname}>李医生</p>
                            <ul className={style.datalists}>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li className={style.stop}>
                                    <p>上午  20个</p>
                                    <p>（已停诊）</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>   
                            </ul>
                        </div>
                        <div className={style.doctornumber}>
                            <p className={style.doctorname}>李医生</p>
                            <ul className={style.datalists}>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li className={style.stop}>
                                    <p>上午  20个</p>
                                    <p>（已停诊）</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>   
                            </ul>
                        </div>
                        <div className={style.doctornumber}>
                            <p className={style.doctorname}>李医生</p>
                            <ul className={style.datalists}>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li className={style.stop}>
                                    <p>上午  20个</p>
                                    <p>（已停诊）</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>
                                <li>
                                    <p>上午  20个</p>
                                </li>   
                            </ul>
                        </div> */}
                    </div>
                </div>
            </Flex>
        </>
     );
}

export default Doctorscheduling;